<template>
  <div class="search">
    <div class="search-box">
      <div class="searchbox-left">
        <img
          src=""
          alt=""
        />
        <input
          type="text"
          placeholder="搜索歌曲、歌手、专辑"
          v-model="keywords"
          v-throttle="search"
        />
      </div>
      <div class="searchbox-right" v-show="keywords !== ''">
        <img
          @click.stop="delkeywords"
          src=""
          alt=""
        />
      </div>
    </div>
    <div class="search-suggest" v-show="keywords !== ''">
      <ScrollViewVue>
        <ul>
          <li
            v-for="value in list"
            :key="value.id"
            @click.stop="detailto(value.id)"
          >
            <img
              src=""
              alt=""
            />
            <p>{{ value.name }} - {{ value.artists[0].name }}</p>
          </li>
        </ul>
      </ScrollViewVue>
    </div>
    <div class="search-hot" v-show="keywords === ''">
      <h3>热门搜索</h3>
      <ul>
        <li
          v-for="(item, index) in hotlist"
          :key="index"
          @click.stop="selectedHot(item.first)"
        >
          {{ item.first }}
        </li>
      </ul>
    </div>
    <ul class="search-history">
      <li v-for="value in searchHistory" :key="value">
        <div class="search-left">
          <img
            src=""
            alt=""
          />
          <p>{{ value }}</p>
        </div>
        <div class="search-right">
          <img
            @click.stop="delHistory(value)"
            src=""
            alt=""
          />
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { getSearchList, getSearchHot } from "../api";
import ScrollViewVue from "../components/ScrollView.vue";
import { mapActions } from "vuex";
import { setLocalStorage, getLocalStorage } from "../tools/tools";
export default {
  name: "Search",
  data() {
    return {
      keywords: "",
      list: [],
      hotlist: [],
      searchHistory: [],
    };
  },
  async created() {
    let res = await getSearchHot();
    // console.log(res);
    this.hotlist = res.result.hots;

    if (
      getLocalStorage("searchHistory") === undefined ||
      getLocalStorage("searchHistory") === null
    ) {
      return;
    }
    this.searchHistory = getLocalStorage("searchHistory");
  },
  methods: {
    ...mapActions(["setFullScreent", "setSongDetail", "setMiniPlayer"]),
    async search() {
      let res = await getSearchList({ keywords: this.keywords });
      // console.log(res);
      this.list = res.result.songs;
    },
    detailto(id) {
      this.setFullScreent(true);
      this.setMiniPlayer(false);
      this.setSongDetail([id]);

      // 检查当前searchHistory中有没有 keywords 搜索框的内容
      if (this.searchHistory.includes(this.keywords)) {
        return;
      }
      this.searchHistory.push(this.keywords);
      setLocalStorage("searchHistory", this.searchHistory);
    },
    async selectedHot(name) {
      let res = await getSearchList({ keywords: name });
      // console.log(res);
      this.keywords = name;
      this.list = res.result.songs;
    },
    delkeywords() {
      this.keywords = "";
    },
    delHistory(val) {
      let ind = this.searchHistory.findIndex((item) => item === val);
      this.searchHistory.splice(ind, 1);
      setLocalStorage("searchHistory", this.searchHistory);
    },
  },
  // 自定义指令 节流
  directives: {
    throttle: {
      // 指令的定义
      inserted: function (el, obj) {
        let timerId = null;
        let flag = true;
        el.addEventListener("input", function () {
          if (!flag) return;
          flag = false;
          timerId && clearTimeout(timerId);
          timerId = setTimeout(function () {
            flag = true;
            obj.value();
          }, 1000);
        });
      },
    },
  },
  components: {
    ScrollViewVue,
  },
};
</script>
<style scoped lang="scss">
@import "../assets/css/variable.scss";
@import "../assets/css/mixin.scss";
.search {
  position: fixed;
  top: 184px;
  left: 0;
  right: 0;
  bottom: 0;
  .search-box {
    display: flex;
    justify-content: space-between;
    margin: 40px 20px;
    align-items: center;
    background: #ebecec;
    border-radius: 30px;
    border-bottom: 1px solid #ccc;
    .searchbox-left {
      display: flex;
        justify-content: center;
        align-items: center;
      img {
        width: 40px;
        height: 40px;
        margin-left: 20px;
      }
      input {
        border: none;
        outline: none;
        background: transparent;
        @include font_size($font_medium);
        height: 60px;
        margin-left: 20px;
      }
    }
    .searchbox-right {
      img {
        width: 30px;
        height: 30px;
        margin-right: 20px;
      }
    }
  }
  .search-suggest {
    // background: #f00;
    position: fixed;
    top: 320px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    @include bg_sub_color();
    ul {
      li {
        display: flex;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
      }
    }
    img {
      width: 40px;
      height: 40px;
    }
    p {
      @include font_size($font_medium);
      @include font_color();
      margin-left: 20px;
    }
  }
  .search-hot {
    h3 {
      @include font_color();
      @include font_size($font_medium);
      padding: 10px 20px;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      li {
        display: flex;
        align-items: center;
        height: 60px;
        line-height: 60px;
        border: 1px solid #ccc;
        border-radius: 30px;
        padding: 0 20px;
        margin: 10px;
        @include font_color();
        @include font_size($font_medium_s);
      }
    }
  }
  .search-history {
    padding: 20px;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      .search-left {
        display: flex;
        img {
          width: 40px;
          height: 40px;
        }
        p {
          @include font_size($font_medium);
          @include font_color();
          margin-left: 20px;
          display: flex;
          align-items: center;
        }
      }
      .search-right {
        img {
          width: 30px;
          height: 30px;
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
